<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="<c:url value="/js/plug/autocomplete/jquery.autocomplete.js" />"></script>
<link href="<c:url value="/js/plug/autocomplete/jquery.autocomplete.css" />" rel="stylesheet" type="text/css" />

	<div class="header_zj" >
		<div class="left fl">
			<div class="logo fl"><a href="<c:url value="/" />" target="_blank"><img src="<c:url value="/resources/images/common/logo.jpg" />"  style=" margin-left:25px; display:inline;"/></a></div>
			<div class="logo_right fl">
				<div class="wenzi fl"></div>
			</div>
		</div>
		<div class="zhongjian fl" >
			<div class="search fl" id="headerToolbar" style="z-index: 1000;">
				<form action="<c:url value="/product/searchProduct.s" />" method="post"  id="inc_searchProductForm" >
	                <input type="hidden" value="${result.data.svo.chsName }" name="chsName" id="inc_chsName">
	                <div class="search_left fl">
						<div class="cp_s">全部</div>
					</div>
	                <c:if test="${not empty result.data.svo.searchWhere && result.data.svo.searchWhere ne ''}">
	                 <input type="text" class="search_zj fl" value="${result.data.svo.searchWhere }" name="searchWhere" id="summary"  onclick="clr()"/>
	                </c:if>
	                <c:if test="${empty result.data.svo.searchWhere || result.data.svo.searchWhere eq ''}">
	                 <input type="text" class="search_zj fl" value="可输入:药品名|编号|厂家|中药输小数点." name="searchWhere" id="summary"  onclick="clr()"/>
	                </c:if>
	                <button class="search_btn f1" id="inc_subSearchBtn">搜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;索</button>
	                <!-- <input class="search_btn fl" id="inc_subSearchBtn" type="button" > -->
	            </form>
			</div>
			<div class=smart style="position: absolute;top: 180px;left: 141px;z-index: 8000">
               <ul id="autoUl"></ul>
          	</div> 
<!-- 			<div class="gjc fl"> <span>热门搜索：</span>
				<ul>
					<li><a href="javascript:setSearchValueForSearch('避孕套');">避孕套</a></li>
					<li><a href="javascript:setSearchValueForSearch('日抛');">日抛</a></li>
					<li><a href="/product/searchProduct.s?productTypeCode=136&amp;brandId=">计生用品 </a></li>
					<li><a href="../product/searchProduct.s?productTypeCode=138&amp;brandId=">生活用品 </a></li>
					<li><a href="../product/searchProduct.s?productTypeCode=141&amp;brandId=">化妆品 </a></li>
					<li><a href="../product/searchProduct.s?productTypeCode=262&amp;brandId=">清热解毒 </a></li>
					<li><a href="../product/searchProduct.s?productTypeCode=98&amp;brandId=">妇科用药</a></li>
				</ul>
			</div> -->
		</div>
			<div style ="float:left; margin-top:28px;">
            	<img src="<c:url value="/views/jsp/center/resources/images/common/phone.png" />" margin-top="10px" width="162" height="41" />
            </div>
<!-- 		<div class="right fr"></div> -->
</div>
<script>
function clr(){
	 if($("#summary").val()=="可输入:药品名|编号|厂家|中药输小数点."){
	        $("#summary").val("");
	 }
}
$("#summary").autocomplete('<c:url value="/product/searchAjaxProductList.s" />', {
    delay:100,//延迟10秒  
    max:10,//最多5条记录  
    autoFill: false,
    minChars:2,  
    matchSubset:true,  
    cacheLength:10,  
    matchContains: true,     
    width:457,  
    dataType:'json',//返回的数据类型为JSON类型  
    scroll:true,
    extraParams: {searchWhere:function(){return encodeURIComponent($('#summary').val());}},
    parse:function(data){
    	 //data="[{chsName:'化痔片\54',productCode:'20125012',spell:'HZP'},{chsName:'创灼膏\20g',productCode:'20614811',spell:'CZG'}]";
      var parsed = [];  
      //var ret = eval("("+data+")");
      var ret = data.rows;
      for(var i=0;i<ret.length;i++){
          parsed[parsed.length] = {  
                  data: ret[i],  
                  value: ret[i].chsName,  
                  result: ret[i].chsName //返回的结果显示内容  
          };  
      }
      return parsed;  
   },
   formatItem: function(item) {//显示下拉列表的内容  
	   var str = "";
	   if(item.productCode!=""){
		str+="("+item.productCode+")";
	   }
	   if(item.spell!=""){
		str+="("+item.spell+")";
	   }
       return "<div>"+item.chsName+str+"</div>";  
   },  
   formatMatch: function(item) {  
       return item.chsName;  
   },  
   formatResult:function(item) {  
       return item.chsName;  
   }
}).result(function(event, item, formatted) {//把返回的结果内容显示在其他文本框上      
	 $("#summary").val(item.chsName); 
   
 }); 
 $("#inc_subSearchBtn").click(function(){
	$("#inc_searchProductForm").submit();
 });

var setSearchValueForSearch = function(str){
	$("#summary").val(str);
	$("#inc_searchProductForm").submit();
}
</script>	
<!--头部结束-->